<template>
	<span>单击可循环浏览状态：</span>
	<div class="btn-container">
		<Transition name="slide-up">
			<button
				v-if="docState === 'saved'"
				@click="docState = 'edited'">编辑</button>
			<button
				v-else-if="docState === 'edited'"
				@click="docState = 'editing'">保存</button>
			<button
				v-else-if="docState === 'editing'"
				@click="docState = 'saved'">取消</button>
		</Transition>
	</div>
</template>

<script setup>
	import { ref } from "vue" 
	
	const docState = ref('saved') 
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.btn-container {
	display: inline-block;
	/* position: relative; */
	height: 1em;
}
button {
  position: absolute;
}
.slide-up-enter-active,
.slide-up-leave-active {
	transition: all 0.25s ease-in-out;
}
.slide-up-enter-from {
	opacity: 0; 
	transform: translateY(30px);
}
.slide-up-leave-to {
	opacity: 0; 
	transform: translateY(-30px);
}
</style>
